<template>
  <div>
    <wh-map ref="map" @click="locate" :center="center"></wh-map>
    <van-row class="footer" v-show="state==0">
      <van-col span="24">
        <van-button type="info" @click="state=1">我有物资</van-button>
      </van-col>
    </van-row>

    <van-popup v-model="value" class="st-popup" closeable position="bottom">
      <div v-show="!hasLogin">
        <van-cell-group>
          <van-row>
            <van-col>
              <van-field v-model="hasForm.mobile" placeholder="请输入用户名" required label="手机号" />
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24">
              <van-field v-model="hasForm.sms" center clearable label="短信验证码" placeholder="请输入短信验证码，2020" required>
                <van-button slot="button" size="small" type="primary">发送验证码</van-button>
              </van-field>
            </van-col>
          </van-row>
        </van-cell-group>
        <div style="text-align: center; padding: 20px;">
          <van-button type="primary" size="large" @click="login">登录</van-button>
        </div>
      </div>
      <div v-show="hasLogin">
        <van-collapse v-model="openMS" v-show="!pickAddr && !pickUnit" :accordion="true">
          <van-collapse-item v-for="(m,i) in ms" :key="i" :title="m.id?m.name:'未保存'" :name="i">
            <van-cell-group>
              <div>
                <van-field v-model="m.name" required placeholder="请输入物资名称" label="物资名称" />
                <van-field v-model="m.store" placeholder="请选择库存" label="库存" />
                <van-field v-model="m.unit" placeholder="请选择单位" label="单位/规格" @focus="selectUnit(m)" />
                <van-field v-model="m.remark" placeholder="如：每盒 50 个" label="说明"/>
                <van-field v-model="m.address" required placeholder="请选择地区" label="所在地区" @focus="selectArea(m)" />
                <van-field v-model="m.addrDetail" placeholder="请输入详细地址" label="详细地区" />
                <van-field v-model="m.belong" required placeholder="厂商名 / 药店名 / 个人" label="信息源" />
                <van-field v-model="m.type" required placeholder="请选择所属性质" label="信息性质"  @focus="selectXZ(m)"/>
                <van-button type="primary" size="large" @click="saveM(m)">保存</van-button>
                <van-button type="default" size="large" @click="close(m)">取消</van-button>
                <van-button type="warning" size="large" @click="deleteM(m)">删除</van-button>
              </div>
            </van-cell-group>
          </van-collapse-item>
        </van-collapse>
        <van-button v-show="openMS === ''" type="info" size="large" @click="addM()">添加物资</van-button>
        <van-picker v-show="pickUnit" :columns="selectOpt.columns" @confirm="selectOpt.confirm" show-toolbar :title="selectOpt.title" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import WhMap from "./wh-map";
import areaList from "./areaListXM";
export default {
  name: "index",
  components: {
    "wh-map": WhMap
  },
  data() {
    return {
      state: 0,
      hasLogin: false,
      center: { lng: 109.45744048529967, lat: 36.49771311230842 },
      show: false,
      addressKeyword: "",
      pickAddr: false,
      pickUnit: false,
      hasForm: {
        mobile: "",
        userType: ""
      },
      selectOpt: {
        confirm: () => {},
        columns: [],
        title: ""
      },
      units: ["个", "盒", "箱"],
      areaList: areaList,
      cm: {},
      ms: [],
      openMS: ""
    };
  },
  computed: {
    value: {
      get() {
        return !!this.state && !this.pickAddr;
      },
      set() {
        this.state = 0;
      }
    }
  },
  methods: {
    close(m) {
      this.openMS = "";
      if (!m.id) {
        let idx = this.ms.indexOf(m);
        this.ms.splice(idx, 1);
      }
    },
    saveM(m) {
      m.id = 1;
      this.openMS = "";
    },
    deleteM(m) {
      let idx = this.ms.indexOf(m);
      this.ms.splice(idx, 1);
      this.openMS = "";
    },
    addM() {
      this.cm = {};
      this.openMS = this.ms.length;
      this.ms.push(this.cm);
    },
    current(m) {
      this.cm = m;
    },
    selectArea(m) {
      this.current(m);
      this.state = 0;
    },
    selectXZ(m) {
      let _ = this;
      this.current(m);
      this.pickUnit = true;
      this.selectOpt = {
        confirm: _.type,
        columns: ['厂商', '药店', '个人'],
        title: '请选择信息性质'
      }
    },
    selectUnit(m) {
      let _ = this
      this.current(m);
      this.pickUnit = true;
      this.selectOpt = {
        confirm: _.unit,
        columns: _.units,
        title: '请选择单位'
      }
    },
    locate(e) {
      let _ = this;
      this.hasForm.lng = e.point.lng;
      this.hasForm.lat = e.point.lat;
      this.center = e.point;
      window.console.info("----------------");
      if (this.cm) {
        var geocoder = new this.$refs.map.BMap.Geocoder();
        geocoder.getLocation(e.point, function(rs) {
          Object.assign(_.cm, {
            lng: e.point.lng,
            lat: e.point.lat,
            province: rs.addressComponents.province,
            city: rs.addressComponents.city,
            district: rs.addressComponents.district,
            street: rs.addressComponents.street,
            address: rs.address,
            streetNumber: rs.addressComponents.streetNumber
          });
          _.state = 1;
          window.console.info(_.cm);
        });
      }
    },
    login() {
      this.hasLogin = true;
    },
    area(a) {
      this.pickAddr = false;
      let area = "";
      a.forEach(el => {
        area = area + el.name;
      });
      this.cm.area = area;
    },
    type(value) {
      this.pickUnit = false;
      window.console.info(value);
      this.cm.type = value;
    },
    unit(value) {
      this.pickUnit = false;
      window.console.info(value);
      this.cm.unit = value;
    }
  },
  mounted() {
    navigator.geolocation.getCurrentPosition(function(position) {
      window.console.info(position);
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.footer {
  z-index: 9999999;
  position: fixed;
  bottom: 100px;
  width: 100vw;
  text-align: center;
}
.st-popup {
  padding: 40px 0px;
}
</style>
